<template>
  <div  class="flex-row-center newbie-teach">
    <div class="keyboard-box">
      <KeyBoard :size="12" :config="keyboardConfig" id="keyboard"></KeyBoard>
    </div>

  </div>
  <YDriver :steps="steps" @end="handleEnd"></YDriver>
</template>

<script setup lang="ts">

import KeyBoard from "@/components/keyboard/KeyBoard.vue";
import {KeyboardEventConfig, KeyboardEventMode} from "@/ts/keyboard";
import YDriver, {IStep} from "@/components/driver/YDriver.vue";

let keyboardConfig: KeyboardEventConfig = {
  mode: KeyboardEventMode.SIMPLE
}
const steps: IStep[] = [{
  element: "#keyboard",
  popover: {
    title: "介绍",
    description: "这是一个虚拟键盘示意图"
  }
}, {
  element: "#KeyF",
  popover: {
    title: "基础键",
    description: "左手食指按压"
  }
}, {
  element: "#KeyJ",
  popover: {
    title: "基础键",
    description: "右手食指按压"
  }
},
  {
    element: "#Space",
    popover: {
      title: "基础键",
      description: "左手大拇指和右手大拇指同时放"
    }
  },]

function handleEnd(){
  console.log('end')
}
</script>

<style scoped lang="less">
  .newbie-teach{
    width: 100%;
    height: 100%;
    .keyboard-box{
    }
  }
</style>